<template>
    <div class="musicmen">
        <div class="header padding-24 space-between bg-active" >
            <div class="h-back" @click="goBack"><img :src="back" alt=""></div>
            <div class="title fs-36 color-f">{{title}}</div>
            <!-- <div class="h-share"></div> -->
            <div class="h-right"></div>
        </div>
        <div class="list">
            <div class="list-item bg-f padding-24 space-between" v-for="(item,index) in attentionlist" :key="index">
                <div class="left">
                    <img :src="item.cove" alt="" class="cove">
                    <div class="loge" v-if="item.ismusicer==true||item.isvip==true">
                        <img :src="musicer" alt="" v-if="item.ismusicer==true">
                        <img :src="vip" alt="" v-if="item.isvip==true&&item.ismusicer==false">
                    </div>
                </div>
                <div class="right  space-between">
                    <div class="flex-column">
                        <p class="fs-32">{{item.name}}</p>
                        <div class="center-col fs-24 color-6">
                            <!-- <p>通讯录名字</p> -->
                            <!-- <p v-if="item.fansnum&&item.ismusicer==true">|</p>
                            <p v-if="item.ismusicer==true">音乐人</p> -->
                        </div>
                        
                    </div>
                    <div class="gzhu center">+关注</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            back:require('../../assets/index/back.png'),
            title:'认识的人',
            musicer:require('../../assets/account/musicer.png'),
            vip:require('../../assets/account/vip.png'),
            attentionlist:[
                {
                    cove:require("../../assets/image/cove.png"),
                    fansnum:1,
                    ismusicer:true,
                    isvip:true,
                    name:'磨人的小妖精1',
                    text:'这是一个磨人的小妖精，真的很磨人。'
                },
                {
                    cove:require("../../assets/image/cove.png"),
                    fansnum:100,
                    ismusicer:false,
                    isvip:false,
                    name:'磨人的小妖精2',
                    text:'这是一个磨人的小妖精，真的很磨人。'
                },
                {
                    cove:require("../../assets/image/cove.png"),
                    fansnum:10,
                    ismusicer:false,
                    isvip:true,
                    name:'磨人的小妖精3',
                    text:'这是一个磨人的小妖精，真的很磨人。'
                },
                {
                    cove:require("../../assets/image/cove.png"),
                    fansnum:20,
                    ismusicer:true,
                    isvip:false,
                    name:'磨人的小妖精4',
                    text:'这是一个磨人的小妖精，真的很磨人。'
                }
            ],
        }
    },
    methods:{
        goBack(){
            this.$router.go(-1);
        },
    }
}
</script>
<style lang="scss" scoped>
.musicmen{
    .header{
        width: 100%;
        height: 1rem;
        .h-back{
            width: 0.15rem;
            height: 0.26rem;
            img{
                //transform: rotate(180deg);
                width: 100%;
            }
        }
        .title{
            font-size: 0.36rem;
            font-weight: bold;
        }
        .h-right{
            width: 0.38rem;
            height: 0.5rem;
            img{
                display: inline-block;
                width: 100%;
            }
        }
        .h-share{
            position: absolute;
            right: 1rem;
            width: 0.45rem;
            height: 0.43rem;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    .list{
        margin-top:1rem;
        .list-item{
            height: 1.4rem;
            border-bottom: 0.01rem solid #e9e9e9;
            .left{
                width: 0.85rem;
                height: 0.85rem;
                position: relative;
                .cove{
                    width: 0.85rem;
                    height: 0.85rem;
                    border-radius: 50%;
                    object-fit: cover;
                }
                .point{
                    width: 0.16rem;
                    height: 0.16rem;
                    position: absolute;
                    border-radius: 50%;
                    right: 0;
                    top: 0;
                }
                .loge{
                    width: 0.32rem;
                    height: 0.32rem;
                    position: absolute;
                    border-radius: 50%;
                    bottom: 0;
                    right: 0;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .right{
                width: calc(100% - 1.1rem);
                height: 0.9rem;
                .gzhu{
                    width: 1.18rem;
                    height: 0.5rem;
                    border-radius: 0.25rem;
                    border: 0.01rem solid #540479;
                    color: #540479;
                }
                .center-col{
                    p{
                        margin-right: 0.1rem;
                    }
                }
            }
        }
    }
}
</style>
